<template>
    <div>
        <Banner title='新闻动态' flag="new"></Banner>
        <div class="container text-center new_container">
            <div class="row">
                <div class="col-lg-12 news_nav">
                    <span class="news_style" :class="{ 'active_nav': sId == 1 }" @click="handleNav(1)">公司新闻</span>
                    <span class="news_style" :class="{ 'active_nav': sId == 2 }" @click="handleNav(2)">行业动态</span>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4" v-for="n in newsList" :key="n.id">
                    <transition name="newsList" appear class="animate__animated" enter-active-class="animate__fadeInUp">
                        <div class="thumbnail thumbnail_container" @click="goNewDetail(n.id)" v-loading="loading">
                            <div class="img_container">
                                <img :src="n.imgUrl" alt="companyNew" />
                            </div>
                            <div class="caption content">
                                <h3>
                                    {{ n.title }}
                                </h3>
                                <p class="date">{{ n.releaseDate }}</p>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
        <!-- 分页器 -->
        <Pagination :page="page" :limit=limit :total="newStore.total" :sId='sId'></Pagination>
    </div>
</template>

<script setup lang="ts">
    import useNewStore from '@/store/modules/new.ts'
    import { ref, onMounted, computed } from 'vue'
    import $bus from '@/bus/index'
    import { useRouter } from 'vue-router'

    const newStore = useNewStore()
    const router = useRouter()

    let page = ref(1)
    let limit = ref(6)
    let sId = ref(1) // 1：公司新闻 | 2：行业动态
    let newsList = computed(() => newStore.newList)
    let loading = computed(() => newStore.isLoading)

    onMounted(() => {
        getNews()
    })
    // 跳转新闻详情
    const goNewDetail = (id: number) => {
        router.push({
            path: '/newDetail',
            query: {
                id
            }
        })
        //将该函数包裹一个定时器确保可以获取跳转页面后的指定位置的id
        setTimeout(() => {
            let goDetailTop = document.getElementById('new_detail')
            if (goDetailTop) {
                goDetailTop.scrollIntoView({
                    behavior: 'smooth',//平滑滚动
                    block: "center"//将指定位置滚动到页面中间
                })
            }
        }, 100)
    }
    // 切换导航
    const handleNav = async (status: number) => {
        sId.value = status
        getNews()
        $bus.emit('clearPage', 1)
    }
    // 获取新闻列表数据
    const getNews = async () => {
        newStore.page = page.value
        newStore.limit = limit.value
        newStore.sId = sId.value
        await newStore.getNews()
    }

</script>

<style scoped lang="scss">
    .new_container {
        margin-top: 80px;
        margin-bottom: 60px;

        .news_nav {
            height: 60px;
            width: 100%;
            margin-bottom: 60px;

            .news_style {
                background-color: #f8f8f8;
                color: #999;
                font-size: 18px;
                font-family: "Source Han Sans CN";
                display: inline-block;
                width: 50%;
                height: 100%;
                line-height: 60px;
                text-align: center;
                user-select: none;
                cursor: pointer;
                transition: all 0.2s linear;

                &:hover {
                    color: #666;
                    background-color: #f1f1f1;
                }
            }

            .active_nav {
                background-color: #4f68ac20;
                color: #4F68AC;
                font-size: 20px;
                font-weight: 550;
                transition: all 0.2s linear;

                &:hover {
                    background-color: #4f68ac20;
                    color: #4F68AC;
                }
            }
        }

        .thumbnail_container {
            border: 0 solid #eeeeee;
            border-radius: 0px;
            padding: 20px 20px 10px 20px;
            margin-bottom: 40px;
            cursor: pointer;
            transition: all 0.2s linear;

            &:hover {
                box-shadow: 1px 10px 34px 1px rgb(0 0 0 / 10%);
                transform: translateY(-3px);
            }

            .img_container {
                height: 182px;
                width: 100%;
                overflow: hidden;

                img {
                    width: 100%;
                    background-color: #f1f1f1;
                }
            }

            .content {
                h3 {
                    font-family: "Source Han Sans CN";
                    font-size: 18px;
                    text-align: left;
                    color: #666666;
                    height: 50px;
                    line-height: 26px;
                    margin-top: 10px;
                    margin-bottom: 5px;
                    /* 文本超出两行显示省略号 */
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    /* 这里是超出几行省略 */
                    overflow: hidden;
                }

                .date {
                    font-family: "Source Han Sans CN";
                    font-size: 15px;
                    color: #999999;
                    text-align: right;
                    margin-bottom: 5px;
                }
            }
        }
    }
</style>